<template>
  <div id="dialogReadDetail">
    <el-dialog
      class="about-set"
      title="阅读图文查看详情"
      :visible.sync="dialogData.isShow"
      width="700px"
      top="20px"
      :before-close="labelHandleClose"
    >
      <div v-loading="loading" class="task-detail-con">
        <div class="detail-left">
          <img :src="formData.user.avatar" alt="头像" />
        </div>
        <div class="detail-right">
          <dl>
            <dt>
              {{ formData.user.nickname }}
            </dt>
            <dd>
              <span>{{ formData.user.dpAccount }}</span>
              <span>创建时间：{{ formData.createDate }}</span>
              <span>发布时间：{{ formData.publishDate }}</span>
            </dd>
          </dl>
        </div>
      </div>
      <div class="read-con">
        <!--预览区域-->
        <div class="title" v-html="formData.title"></div>
        <div class="con" v-html="formData.detailsContent"></div>
      </div>
      <ul class="foot-list">
        <li>评论 {{ formData.commentCount }}</li>
        <li>点赞 {{ formData.likeCount }}</li>
        <li>分享 {{ formData.shareAmount }}</li>
        <li>最新编辑者 {{ formData.latestEditor || '-' }}</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail } from '@/api/readManagement/readMine' // 接口
export default {
  name: 'dialogReadDetail',
  msg: '阅读管理-查看详情',
  props: ['dialogData'],
  data() {
    return {
      id: '',
      loading: false,
      formData: {
        user: {}
      }
    }
  },
  mounted() {
    this.id = this.dialogData.params
    this.getFormDetail()
  },
  methods: {
    //获取表单详情
    getFormDetail() {
      getDetail(
        this.id,
        (response) => {
          this.loading = false
          this.formData = response
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#dialogReadDetail {
  .el-dialog__body {
    padding-top: 15px !important;
  }
  .el-dialog__header {
    height: 40px;
  }
  .el-dialog__wrapper {
    z-index: 3000 !important;
  }
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;

    .detail-left,
    .detail-right {
      display: table-cell;
      .detail-top {
        font-weight: 400;
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0 5px;
        border-radius: 2px;
      }
      .as-code-number {
        color: #ccc;
      }
    }

    .detail-left {
      width: 70px;
      vertical-align: top;

      img {
        display: inline-block;
        border: 1px solid #eee;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .detail-right {
      dt {
        padding: 2px 0 5px;
        line-height: 18px;
      }
      dd {
        span {
          margin-right: 10px;
        }
      }
    }
  }
  .read-con {
    clear: both;
    padding: 15px 0;
    min-height: 300px;
    max-height: 550px;
    overflow: auto;
    .title {
      text-align: center;
      font-size: 18px;
      line-height: 20px;
      margin-bottom: 15px;
      color: #333;
    }
    img {
      max-width: 100%;
    }
    .con {
      p {
        white-space: pre-wrap;
      }
    }
  }
  ul.foot-list {
    padding: 20px 0 15px;
    overflow: hidden;

    li {
      float: left;
      margin-right: 20px;
      color: #333;
    }
  }
}
</style>
